<entry><ulink url="https://www.w3.org/TR/css3-ui/#outline-offset">CSS3</ulink></entry>
<entry></entry>
</row>
- <row>
- <entry><phrase role="nowrap">-gtk-outline-top-left-radius</phrase></entry>
- <entry><code>〈corner radius〉</code></entry>
- <entry><code>0</code></entry>
- <entry></entry>
- <entry>✓</entry>
- <entry></entry>
- <entry></entry>
- </row>
- <row>
- <entry><phrase role="nowrap">-gtk-outline-top-right-radius</phrase></entry>
- <entry><code>〈corner radius〉</code></entry>
- <entry><code>0</code></entry>
- <entry></entry>
- <entry>✓</entry>
- <entry></entry>
- <entry></entry>
- </row>
- <row>
- <entry><phrase role="nowrap">-gtk-outline-bottom-right-radius</phrase></entry>
- <entry><code>〈corner radius〉</code></entry>
- <entry><code>0</code></entry>
- <entry></entry>
- <entry>✓</entry>
- <entry></entry>
- <entry></entry>
- </row>
- <row>
- <entry><phrase role="nowrap">-gtk-outline-bottom-left-radius</phrase></entry>
- <entry><code>〈corner radius〉</code></entry>
- <entry><code>0</code></entry>
- <entry></entry>
- <entry>✓</entry>
- <entry></entry>
- <entry></entry>
- </row>
</tbody>
</tgroup>
<tgroup cols="5">
<ulink url="https://www.w3.org/TR/css3-ui/#propdef-outline">CSS3</ulink></entry>
<entry></entry>
</row>
- <row>
- <entry><phrase role="nowrap">-gtk-outline-radius</phrase></entry>
- <entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry>
- <entry>see individual properties</entry>
- <entry></entry>
- <entry></entry>
- </row>
</tbody>
</tgroup>
</table>
unshare_outline (animated);
gtk_css_take_value (&style->outline->outline_offset, value);
break;
- case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
- unshare_outline (animated);
- gtk_css_take_value (&style->outline->outline_top_left_radius, value);
- break;
- case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
- unshare_outline (animated);
- gtk_css_take_value (&style->outline->outline_top_right_radius, value);
- break;
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
- unshare_outline (animated);
- gtk_css_take_value (&style->outline->outline_bottom_right_radius, value);
- break;
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
- unshare_outline (animated);
- gtk_css_take_value (&style->outline->outline_bottom_left_radius, value);
- break;
case GTK_CSS_PROPERTY_BACKGROUND_CLIP:
unshare_background (animated);
gtk_css_take_value (&style->background->background_clip, value);
case GTK_CSS_PROPERTY_OUTLINE_STYLE:
case GTK_CSS_PROPERTY_OUTLINE_WIDTH:
case GTK_CSS_PROPERTY_OUTLINE_OFFSET:
- case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
- case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
case GTK_CSS_PROPERTY_BORDER_TOP_COLOR:
case GTK_CSS_PROPERTY_BORDER_RIGHT_COLOR:
case GTK_CSS_PROPERTY_BORDER_BOTTOM_COLOR:
gtk_css_boxes_compute_outline_rect (boxes);
gtk_css_boxes_apply_border_radius (&boxes->box[GTK_CSS_AREA_OUTLINE_BOX],
- boxes->style->outline->outline_top_left_radius,
- boxes->style->outline->outline_top_right_radius,
- boxes->style->outline->outline_bottom_right_radius,
- boxes->style->outline->outline_bottom_left_radius);
+ boxes->style->border->border_top_left_radius,
+ boxes->style->border->border_top_right_radius,
+ boxes->style->border->border_bottom_right_radius,
+ boxes->style->border->border_bottom_left_radius);
boxes->has_box[GTK_CSS_AREA_OUTLINE_BOX] = TRUE;
}
"border-top-color", "border-right-color", "border-bottom-color", "border-left-color",
"border-image-source", "border-image-slice", "border-image-width", "border-image-repeat", NULL };
const char *outline_subproperties[] = { "outline-width", "outline-style", "outline-color", NULL };
- const char *outline_radius_subproperties[] = { "-gtk-outline-top-left-radius", "-gtk-outline-top-right-radius",
- "-gtk-outline-bottom-right-radius", "-gtk-outline-bottom-left-radius", NULL };
const char *background_subproperties[] = { "background-image", "background-position", "background-size", "background-repeat", "background-clip", "background-origin",
"background-color", NULL };
const char *transition_subproperties[] = { "transition-property", "transition-duration", "transition-delay", "transition-timing-function", NULL };
gtk_css_shorthand_property_register ("border",
border_subproperties,
parse_border);
- gtk_css_shorthand_property_register ("-gtk-outline-radius",
- outline_radius_subproperties,
- parse_border_radius);
gtk_css_shorthand_property_register ("outline",
outline_subproperties,
parse_border_side);
GTK_CSS_PROPERTY_OUTLINE_STYLE,
GTK_CSS_PROPERTY_OUTLINE_WIDTH,
GTK_CSS_PROPERTY_OUTLINE_OFFSET,
- GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS,
- GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS,
- GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS,
- GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS,
GTK_CSS_PROPERTY_OUTLINE_COLOR,
};
case GTK_CSS_PROPERTY_OUTLINE_OFFSET:
gtk_css_take_value (&style->outline->outline_offset, value);
break;
- case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
- gtk_css_take_value (&style->outline->outline_top_left_radius, value);
- break;
- case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
- gtk_css_take_value (&style->outline->outline_top_right_radius, value);
- break;
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
- gtk_css_take_value (&style->outline->outline_bottom_right_radius, value);
- break;
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
- gtk_css_take_value (&style->outline->outline_bottom_left_radius, value);
- break;
case GTK_CSS_PROPERTY_BACKGROUND_CLIP:
gtk_css_take_value (&style->background->background_clip, value);
break;
values->outline_style = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_STYLE, NULL, NULL, NULL);
values->outline_width = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_WIDTH, NULL, NULL, NULL);
values->outline_offset = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_OFFSET, NULL, NULL, NULL);
- values->outline_top_left_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS, NULL, NULL, NULL);
- values->outline_top_right_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS, NULL, NULL, NULL);
- values->outline_bottom_right_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS, NULL, NULL, NULL);
- values->outline_bottom_left_radius = _gtk_css_initial_value_new_compute (GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS, NULL, NULL, NULL);
values->outline_color = NULL;
return (GtkCssValues *)values;
return style->outline->outline_width;
case GTK_CSS_PROPERTY_OUTLINE_OFFSET:
return style->outline->outline_offset;
- case GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS:
- return style->outline->outline_top_left_radius;
- case GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS:
- return style->outline->outline_top_right_radius;
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS:
- return style->outline->outline_bottom_right_radius;
- case GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS:
- return style->outline->outline_bottom_left_radius;
case GTK_CSS_PROPERTY_BACKGROUND_CLIP:
return style->background->background_clip;
case GTK_CSS_PROPERTY_BACKGROUND_ORIGIN:
GtkCssValue *outline_style;
GtkCssValue *outline_width;
GtkCssValue *outline_offset;
- GtkCssValue *outline_top_left_radius;
- GtkCssValue *outline_top_right_radius;
- GtkCssValue *outline_bottom_right_radius;
- GtkCssValue *outline_bottom_left_radius;
GtkCssValue *outline_color;
};
outline_parse,
_gtk_css_number_value_new (0.0, GTK_CSS_PX));
- gtk_css_style_property_register ("-gtk-outline-top-left-radius",
- GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS,
- GTK_STYLE_PROPERTY_ANIMATED,
- GTK_CSS_AFFECTS_OUTLINE,
- border_corner_radius_value_parse,
- _gtk_css_number_value_new (0, GTK_CSS_PX));
- gtk_css_style_property_register ("-gtk-outline-top-right-radius",
- GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS,
- GTK_STYLE_PROPERTY_ANIMATED,
- GTK_CSS_AFFECTS_OUTLINE,
- border_corner_radius_value_parse,
- _gtk_css_number_value_new (0, GTK_CSS_PX));
- gtk_css_style_property_register ("-gtk-outline-bottom-right-radius",
- GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS,
- GTK_STYLE_PROPERTY_ANIMATED,
- GTK_CSS_AFFECTS_OUTLINE,
- border_corner_radius_value_parse,
- _gtk_css_number_value_new (0, GTK_CSS_PX));
- gtk_css_style_property_register ("-gtk-outline-bottom-left-radius",
- GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS,
- GTK_STYLE_PROPERTY_ANIMATED,
- GTK_CSS_AFFECTS_OUTLINE,
- border_corner_radius_value_parse,
- _gtk_css_number_value_new (0, GTK_CSS_PX));
-
gtk_css_style_property_register ("background-clip",
GTK_CSS_PROPERTY_BACKGROUND_CLIP,
0,
#define GTK_CSS_CHANGE_BACKDROP (1ULL << 10)
#define GTK_CSS_CHANGE_SELECTED (1ULL << 11)
-#define GTK_CSS_CHANGE_SIBLING_SHIFT 12
+#define GTK_CSS_CHANGE_SIBLING_SHIFT 12
#define GTK_CSS_CHANGE_SIBLING_CLASS (1ULL << 12)
#define GTK_CSS_CHANGE_SIBLING_NAME (1ULL << 13)
GTK_CSS_PROPERTY_OUTLINE_STYLE,
GTK_CSS_PROPERTY_OUTLINE_WIDTH,
GTK_CSS_PROPERTY_OUTLINE_OFFSET,
- GTK_CSS_PROPERTY_OUTLINE_TOP_LEFT_RADIUS,
- GTK_CSS_PROPERTY_OUTLINE_TOP_RIGHT_RADIUS,
- GTK_CSS_PROPERTY_OUTLINE_BOTTOM_RIGHT_RADIUS,
- GTK_CSS_PROPERTY_OUTLINE_BOTTOM_LEFT_RADIUS,
GTK_CSS_PROPERTY_BACKGROUND_CLIP,
GTK_CSS_PROPERTY_BACKGROUND_ORIGIN,
GTK_CSS_PROPERTY_BACKGROUND_SIZE,
}
}
-void
-_gtk_rounded_box_apply_outline_radius_for_style (GskRoundedRect *box,
- GtkCssStyle *style)
-{
- const GtkCssValue *corner[4];
-
- corner[GSK_CORNER_TOP_LEFT] = style->outline->outline_top_left_radius;
- corner[GSK_CORNER_TOP_RIGHT] = style->outline->outline_top_right_radius;
- corner[GSK_CORNER_BOTTOM_LEFT] = style->outline->outline_bottom_left_radius;
- corner[GSK_CORNER_BOTTOM_RIGHT] = style->outline->outline_bottom_right_radius;
-
- _gtk_rounded_box_apply_border_radius (box, corner);
-}
-
typedef struct {
double angle1;
double angle2;
double width,
double height);
-void _gtk_rounded_box_apply_outline_radius_for_style (GskRoundedRect *box,
- GtkCssStyle *style);
-
double _gtk_rounded_box_guess_length (const GskRoundedRect *box,
GtkCssSide side);
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
- -gtk-outline-radius: $button-radius - 2;
}
&.circular { // The Bloody Circul Button
border-radius: 9999px;
- -gtk-outline-radius: 9999px;
label { padding: 0; }
}
> trough > highlight,
> trough {
border-radius: 5px;
- -gtk-outline-radius: 7px;
}
}
@extend %scale_trough;
outline-offset: 2px;
- -gtk-outline-radius: 5px;
}
// the colored part of the backing bit
&:first-child{
border-left-style: none;
border-bottom-left-radius: 7px;
- -gtk-outline-bottom-left-radius: 5px;
}
&:last-child {
border-bottom-right-radius: 7px;
- -gtk-outline-bottom-right-radius: 5px;
}
}
}
margin-bottom: 3px;
padding: 0;
border-radius: 100%;
- -gtk-outline-radius: 100%;
&:not(:hover):not(:active),
&:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
&:not(.menu) {
border-radius: 9999px;
- -gtk-outline-radius: 9999px;
padding: 6px;
margin: 0 2px;
min-width: 0;
outline-style: dashed;
outline-offset: -4px;
outline-width: 2px;
- -gtk-outline-radius: 2px;
}
/***************
highlight,
trough {
border-radius: 5px;
- -gtk-outline-radius: 7px;
}
}
@extend %scale_trough;
outline-offset: 2px;
- -gtk-outline-radius: 5px;
}
// the colored part of the backing bit
%last_button {
border-bottom-right-radius: 7px;
- -gtk-outline-bottom-right-radius: 5px;
}
%first_button {
border-left-style: none;
border-bottom-left-radius: 7px;
- -gtk-outline-bottom-left-radius: 5px;
}
}
}
margin-bottom: 3px;
padding: 0;
border-radius: 100%;
- -gtk-outline-radius: 100%;
&:not(:hover):not(:active),
&:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
button.circular { // FIXME: aggregate to buttons
border-radius: 20px;
- -gtk-outline-radius: 20px;
label { padding: 0; }
row:selected & {
a {
- -gtk-outline-bottom-left-radius: initial;
- -gtk-outline-bottom-right-radius: initial;
- -gtk-outline-top-left-radius: initial;
- -gtk-outline-top-right-radius: initial;
+ border-bottom-left-radius: initial;
+ border-bottom-right-radius: initial;
+ border-top-left-radius: initial;
+ border-top-right-radius: initial;
}
b {
- -gtk-outline-bottom-left-radius: inherit;
- -gtk-outline-bottom-right-radius: inherit;
- -gtk-outline-top-left-radius: inherit;
- -gtk-outline-top-right-radius: inherit;
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+ border-top-left-radius: inherit;
+ border-top-right-radius: inherit;
}
c {
- -gtk-outline-bottom-left-radius: unset;
- -gtk-outline-bottom-right-radius: unset;
- -gtk-outline-top-left-radius: unset;
- -gtk-outline-top-right-radius: unset;
+ border-bottom-left-radius: unset;
+ border-bottom-right-radius: unset;
+ border-top-left-radius: unset;
+ border-top-right-radius: unset;
}
d {
- -gtk-outline-bottom-left-radius: 0;
- -gtk-outline-bottom-right-radius: 0;
- -gtk-outline-top-left-radius: 0;
- -gtk-outline-top-right-radius: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
e {
- -gtk-outline-bottom-left-radius: 5px;
- -gtk-outline-bottom-right-radius: 5px;
- -gtk-outline-top-left-radius: 5px;
- -gtk-outline-top-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
}
f {
- -gtk-outline-bottom-left-radius: 50%;
- -gtk-outline-bottom-right-radius: 50%;
- -gtk-outline-top-left-radius: 50%;
- -gtk-outline-top-right-radius: 50%;
+ border-bottom-left-radius: 50%;
+ border-bottom-right-radius: 50%;
+ border-top-left-radius: 50%;
+ border-top-right-radius: 50%;
}
g {
- -gtk-outline-bottom-left-radius: 5px 6px;
- -gtk-outline-bottom-right-radius: 5px 6px;
- -gtk-outline-top-left-radius: 5px 6px;
- -gtk-outline-top-right-radius: 5px 6px;
+ border-bottom-left-radius: 5px 6px;
+ border-bottom-right-radius: 5px 6px;
+ border-top-left-radius: 5px 6px;
+ border-top-right-radius: 5px 6px;
}
h {
- -gtk-outline-bottom-left-radius: 5px 20%;
- -gtk-outline-bottom-right-radius: 5px 20%;
- -gtk-outline-top-left-radius: 5px 20%;
- -gtk-outline-top-right-radius: 5px 20%;
+ border-bottom-left-radius: 5px 20%;
+ border-bottom-right-radius: 5px 20%;
+ border-top-left-radius: 5px 20%;
+ border-top-right-radius: 5px 20%;
}
i {
- -gtk-outline-bottom-left-radius: 10% 20%;
- -gtk-outline-bottom-right-radius: 10% 20%;
- -gtk-outline-top-left-radius: 10% 20%;
- -gtk-outline-top-right-radius: 10% 20%;
+ border-bottom-left-radius: 10% 20%;
+ border-bottom-right-radius: 10% 20%;
+ border-top-left-radius: 10% 20%;
+ border-top-right-radius: 10% 20%;
}
a {
- -gtk-outline-bottom-left-radius: initial;
- -gtk-outline-bottom-right-radius: initial;
- -gtk-outline-top-left-radius: initial;
- -gtk-outline-top-right-radius: initial;
+ border-bottom-left-radius: initial;
+ border-bottom-right-radius: initial;
+ border-top-left-radius: initial;
+ border-top-right-radius: initial;
}
b {
- -gtk-outline-bottom-left-radius: inherit;
- -gtk-outline-bottom-right-radius: inherit;
- -gtk-outline-top-left-radius: inherit;
- -gtk-outline-top-right-radius: inherit;
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+ border-top-left-radius: inherit;
+ border-top-right-radius: inherit;
}
c {
- -gtk-outline-bottom-left-radius: unset;
- -gtk-outline-bottom-right-radius: unset;
- -gtk-outline-top-left-radius: unset;
- -gtk-outline-top-right-radius: unset;
+ border-bottom-left-radius: unset;
+ border-bottom-right-radius: unset;
+ border-top-left-radius: unset;
+ border-top-right-radius: unset;
}
d {
- -gtk-outline-bottom-left-radius: 0;
- -gtk-outline-bottom-right-radius: 0;
- -gtk-outline-top-left-radius: 0;
- -gtk-outline-top-right-radius: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
e {
- -gtk-outline-bottom-left-radius: 5px;
- -gtk-outline-bottom-right-radius: 5px;
- -gtk-outline-top-left-radius: 5px;
- -gtk-outline-top-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
}
f {
- -gtk-outline-bottom-left-radius: 50%;
- -gtk-outline-bottom-right-radius: 50%;
- -gtk-outline-top-left-radius: 50%;
- -gtk-outline-top-right-radius: 50%;
+ border-bottom-left-radius: 50%;
+ border-bottom-right-radius: 50%;
+ border-top-left-radius: 50%;
+ border-top-right-radius: 50%;
}
g {
- -gtk-outline-bottom-left-radius: 5px 6px;
- -gtk-outline-bottom-right-radius: 5px 6px;
- -gtk-outline-top-left-radius: 5px 6px;
- -gtk-outline-top-right-radius: 5px 6px;
+ border-bottom-left-radius: 5px 6px;
+ border-bottom-right-radius: 5px 6px;
+ border-top-left-radius: 5px 6px;
+ border-top-right-radius: 5px 6px;
}
h {
- -gtk-outline-bottom-left-radius: 5px 20%;
- -gtk-outline-bottom-right-radius: 5px 20%;
- -gtk-outline-top-left-radius: 5px 20%;
- -gtk-outline-top-right-radius: 5px 20%;
+ border-bottom-left-radius: 5px 20%;
+ border-bottom-right-radius: 5px 20%;
+ border-top-left-radius: 5px 20%;
+ border-top-right-radius: 5px 20%;
}
i {
- -gtk-outline-bottom-left-radius: 10% 20%;
- -gtk-outline-bottom-right-radius: 10% 20%;
- -gtk-outline-top-left-radius: 10% 20%;
- -gtk-outline-top-right-radius: 10% 20%;
+ border-bottom-left-radius: 10% 20%;
+ border-bottom-right-radius: 10% 20%;
+ border-top-left-radius: 10% 20%;
+ border-top-right-radius: 10% 20%;
}